<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src='./jquery/template-web.js'></script>
    <script src='./jquery/jquery.min.js'></script>
</head>
<body>
    <div class='div_box1'>
        <ul>
            
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
   
        </ul>
        <div class='div_box2'>
            <span class='arr_left'>&lt;</span>
            <span class='arr_right'>&gt;</span>
        </div>
        <ol>
            <!-- <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ol>
    </div>

    <!-- <script type='html/text' id='tem'>
    {{each}}
    
    
    
    {{/each}}
    
    </script> -->
    <script>
        $(function(){

            var dis1 = $('.div_box1').width();
            var ele='';
            // var img = 
            // 1,给大盒子添加事件 移入箭头显示，移出消失
            $('.div_box1').hover(function(){
                $('.div_box2').addClass('display1')
            },function(){
                $('.div_box2').removeClass('display1')
            })

            // 2,动态生成小圆点
            var ul = document.querySelector('ul')
            var ulLeg = $('ul').width()
            var Lis = ul.getElementsByTagName('li')
            // console.log(Lis)
            var num =Lis.length
            // ul.style.left = -dis1 + 'px'
            // console.log(num)
            for(var i=0; i<num; i++){
                $('ol').append(`<li></li>`)
            }

            // 3，点击箭头实现图片更换
            // 3.1 右箭头实现切换
            $('.arr_right').click(function(){
                var disright1 = ul.offsetLeft
                var disright = disright1 - dis1
                // console.log(disright)
                // console.log(ulLeg-dis1)
                
                move(ul,disright,10,30);
               Math.abs($('ul').offsetLeft)/dis1
            })
            // 3.1  左箭头实现切换
            $('.arr_left').click(function(){
                var disright1 = ul.offsetLeft
                var disright = disright1 + dis1
               
                move(ul,disright,10,30)
            })































            
        // var div1 =document.querySelector('div')
        // move(div1,1000,10,30)
        function move(ele,target,step,time){
            if(ele.timeID){
                clearInterval(ele.timeID)
            }
            var steps='';
            var dis ='';
            ele.timeID =  setInterval(function(){
                
                    steps = (target-ele.offsetLeft)/step;
                    // console.log(target)
                    // console.log(ele.offsetLeft)
                    // console.log(steps)
                    dis = steps>0?Math.ceil(steps):Math.floor(steps);
                    // console.log(dis)
                    // console.log(Math.abs(ele.offsetLeft))
                    // console.log(Math.abs(target))
                   
                    //     if(Math.abs(ele.offsetLeft)==Math.abs(target)){
                        
                    //     ele.style.left=target +'px';
                    //     clearInterval(ele.timeID);
                    //     console.log(1);
                    //     return false;
                    //  }
                     ele.style.left = ele.offsetLeft + dis + 'px';
                   if(ele.offsetLeft == $('ul').width-dis1){
                        ele.style.left='0px'
                        console.log(1)
                        return false;
                   }else if(ele.offsetLeft == 0){
                    ele.style.left= ulLeg-dis1 + 'px'
                    console.log(2)
                        return false;
                   }
                   
                    //     if(Math.abs(ele.offsetLeft)==Math.abs(target)){
                        
                    //     ele.style.left=target +'px';
                    //     clearInterval(ele.timeID);
                    //     console.log(1);
                    //     return false;
                    //  }
                   
                    
                    // console.log(dis)
                    // console.log(ele.offsetLeft)
                    
                    // console.log(ele.style.left)
                },time)
                
            }
        })
    </script>
</body>
</html>